<template>
  <div>

    <rose-grid :col="-1">
      <rose-grid-item>
        <div class="XBetweenStretch PLR20 PTB30 R25px MR20 S2 MB20" style="background:#ceebee !important">
          <i class=" WH50px XCC FS20rem color-white R50px iconfont iconadd-account bg-primary-linear MR20"></i>
          <div class=" YStretchBetween color-black-sub">
            <span class=" FS20rem">5600</span>
            <span class=" FS12rem color-gray9">Doctors</span>
          </div>
        </div>
      </rose-grid-item>
      <rose-grid-item>
        <div class="XBetweenStretch PLR20 PTB30 R25px MR20 S2 MB20" style="background:#fae9dd !important">
          <i class=" WH50px XCC FS20rem color-white R50px iconfont iconadd-account bg-warning-linear MR20"></i>
          <div class=" YStretchBetween color-black-sub">
            <span class=" FS20rem">3450</span>
            <span class=" FS12rem color-gray9">Nurses</span>
          </div>
        </div>
      </rose-grid-item>
      <rose-grid-item>
        <div class="XBetweenStretch PLR20 PTB30 R25px MR20 S2 MB20" style="background:#fcecec !important">
          <i class=" WH50px XCC FS20rem color-white R50px iconfont iconadd-account bg-danger-linear MR20"></i>
          <div class=" YStretchBetween color-black-sub">
            <span class=" FS20rem">3500</span>
            <span class=" FS12rem color-gray9">Patients</span>
          </div>
        </div>
      </rose-grid-item>
      <rose-grid-item>
        <div class="XBetweenStretch PLR20 PTB30 R25px MR20 S2 MB20" style="background:#e5faff !important">
          <i class=" WH50px XCC FS20rem color-white R50px iconfont iconadd-account bg-info-linear MR20"></i>
          <div class=" YStretchBetween color-black-sub">
            <span class=" FS20rem">4500</span>
            <span class=" FS12rem color-gray9">Pharmacists</span>
          </div>
        </div>
      </rose-grid-item>

    </rose-grid>

    <rose-table :data="tableData" open expand :hoverSTheme="$theme" lhHead="3.5" lh="3.2" titleAlign='' totalAlign="" :class-total-tr="['border-0w']"
      class="S-box border-1solid border-gray2 R20px FS10rem W100 bg-white ">
      <template #open="{row,index}">
        <div class=" XCC C  W100 H100 bg-white P20 S2 border-1solid border-gray3 R10px">
          {{ row }}/{{ index }}
        </div>
      </template>
      <template #expand="{row,index}">
        <div class="W100 H100 P20">{{ row }}{{ index }}</div>
      </template>
      <template #header>
        <div class=" W100 H100 P30">我是header</div>
      </template>
      <!-- 可省略title插槽,所有信息在body插槽的item属性设置(简单样式) -->

      <template #body="{row,index}">
        <rose-table-item title="ID" :value="index+1" />
        <rose-table-item title="姓名">{{row.name}}</rose-table-item>
        <rose-table-item title="年龄" :value="row.age" titleAlign="right" right totalAlign="right" :total="['sum','avg']" class=" W50px _hover-translateT10px T02s" @click="handleClickTD(row)" />
        <rose-table-item title="日期" :value="row.date" />
        <rose-table-item title="地址" :value="row.address" />
      </template>
      <template #footer>
        <div class=" W100 H100 P30"> footer内容</div>
      </template>
    </rose-table>

  </div>
</template>

<script>
export default {
  mounted() {},
  data() {
    return {
      tableData: [
        {
          id: 1,
          age: 18.2,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          age: 14,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 3,
          age: 16.3,
          date: '2016-05-01',
          name: '张三',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          id: 4,
          age: 55,
          date: '2016-05-03',
          name: '李四',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55,
          date: '2016-05-03',
          name: '刘五',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          id: 5,
          age: 55.5,
          date: '2016-05-03',
          name: '王林',
          address: '上海市普陀16 弄'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
